import React, { useState, useEffect } from "react";

import { useDebounce } from "@/script/index";

import "@/App.css";

function TailwindCSS() {
  const [sideA, setSideA] = useState("");
  const [sideB, setSideB] = useState("");
  const [hypotenuse, setHypotenuse] = useState("");

  const handleSideAChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    if (!/^\d*\.?\d*$/.test(value)) return;
    setSideA(value);
  };

  const handleSideBChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    if (!/^\d*\.?\d*$/.test(value)) return;
    setSideB(value);
  };

  const calculateHypotenuse = () => {
    if (sideA === "" || sideB === "") {
      setHypotenuse("");
      return;
    }

    try {
      const a = parseFloat(sideA);
      const b = parseFloat(sideB);

      const result = Math.sqrt(a * a + b * b);
      setHypotenuse(result.toFixed(2));
    } catch (error) {
      setHypotenuse("请输入有效的数字");
    }
  };

  useEffect(() => {
    calculateHypotenuse();
  }, [sideA, sideB]);

  return (
    <div>
      <div className="flex">
        <div>勾:</div>
        <input type="text" value={sideA} onChange={handleSideAChange} />
      </div>
      <div className="flex">
        <div>股:</div>
        <input type="text" value={sideB} onChange={handleSideBChange} />
      </div>
      <div>
        <div>弦:{hypotenuse}</div>
      </div>
    </div>
  );
}

export default TailwindCSS;
